<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">
            <div class="filter-item">
                <span class="filter-item-title">品种1</span>
                <el-select v-model="apiParams.code1" placeholder="请选择" class="filter-item-select">
                    <el-option
                      v-for="(v, k) in futuresSymbolList"
                      :key="k"
                      :label="k + `_` + v"
                      :value="k">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-item">
                <span class="filter-item-title">品种2</span>
                <el-select v-model="apiParams.code2" placeholder="请选择" class="filter-item-select">
                    <el-option
                      v-for="(v, k) in futuresSymbolList"
                      :key="k"
                      :label="k + `_` + v"
                      :value="k">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <el-button :disabled="loading" @click="getPageData">查看价差历史</el-button>
            </div>

            <div class="filter-item" v-if="chartData.date.length">
                <i class="el-icon-info"></i> {{ chartData.date[chartData.date.length-1] }}：{{ chartData.data[chartData.data.length-1] }}
            </div>

        </div>

        <div id="chartObj" class="charts-wrap"></div>

        <div class="tip-wrap">
            <div><i class="el-icon-info"></i>商品期货数据来源：新浪</div>
            <div class="fr">
                <a href="http://vip.stock.finance.sina.com.cn/quotes_service/view/qihuohangqing.html#titlePos_0" target="_blank">去新浪查看详情&gt;&gt;</a>
            </div>
        </div>
    </inner-layout>
</template>

<script>
import { getSinaFuturesDailyKLine } from '@/api/sina'
import { futuresSymbolList } from '@/config'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	name: 'FuturesVsFuturesHistory',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
            futuresSymbolList: {},
            apiParams: {
                code1: '',
                code2: ''
            },
            chart: null,
            chartTitle: '',
            chartData: {
                date: [],
                data: []
            }
		}
	},
	created() {
        this.futuresSymbolList = futuresSymbolList()
        this.apiParams.code1 = this.$route.query.code1 || ''
        this.apiParams.code2 = this.$route.query.code2 || ''
        if (this.apiParams.code1 && this.apiParams.code2) {
            this.getPageData()
        }
	},
	methods: {
        getPageData() {
            if (!this.apiParams.code1 || !this.apiParams.code2) {
                this.$message.error('请选择需要计算价差的商品')
                return
            } else if (this.apiParams.code1 == this.apiParams.code2) {
                this.$message.error('两个商品不能相同')
                return
            }
            this.eventGetChartData()
        },
        eventGetChartData() {
            let that = this
            getSinaFuturesDailyKLine(that.apiParams.code1 + '0').then(res1 => {
                getSinaFuturesDailyKLine(that.apiParams.code2 + '0').then(res2 => {
                    if (res1.err_code === 0 && res2.err_code === 0) {
                        that.chartTitle = that.futuresSymbolList[that.apiParams.code1] + ' VS ' + that.futuresSymbolList[that.apiParams.code2]
                        that.genCharts(res1.data, res2.data)
                    }
                })
            })
        },
        genCharts(data1, data2) {
            let that = this
            if (!data1 || !data2 || data1.length <= 0 || data2.length <= 0) {
                that.$message.error('获取数据失败')
                return
            }
            that.chartData.date = []
            that.chartData.data = []

            let _dataList1 = {}
            let _dataList2 = {}
            // debugger
            data1.forEach(row => {
                _dataList1[row[0]] = row[4] * 1
            })
            data2.forEach(row => {
                _dataList2[row[0]] = row[4] * 1
            })
            Object.keys(_dataList1).forEach(key => {
                if (_dataList1[key] && _dataList2[key]) {
                    that.chartData.data.push(_dataList1[key] - _dataList2[key])
                    that.chartData.date.push(key)
                }
            })
            console.log('that.chartData', that.chartData)
            
            that.setOptions()
        },
        setOptions() {
            let that = this
            if (!that.chart) {
                that.chart = echarts.init(document.getElementById('chartObj'))
            }
            that.chart.setOption({
                title: {
                    show: that.chartTitle ? true : false,
                    left: 'center',
                    text: that.chartTitle
                },
                tooltip: {
                	trigger: 'axis',
                	axisPointer: {
                		type: 'cross'
                	},
                	padding: [5, 10]
                },
                xAxis: {
                    data: that.chartData.date
                },
                yAxis: {
                    scale: true
                },
                series: [
                    {
                        name: '价差',
                        type: 'line',
                        data: that.chartData.data,
                        itemStyle: {
                        	normal: {
                        		color: '#3888fa',
                        		lineStyle: {
                        			color: '#3888fa',
                        			width: 1
                        		}
                        	}
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                ]
            })
        }
	}
}
</script>

<style lang="scss" scoped>
    .list-wrap {
        margin-top: 30px;
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
    .filter-item {
        .filter-item-title {
            margin-right: 5px;
        }
        .filter-item-select {
            width: 120px;
        }
    }
    .charts-wrap {
        width: 100%;
        height: calc(100vh - 400px);
    }
</style>
